<template>
  <div class="peopleContainer">
    <!-- 顶部关键数据栏 -->
    <div class="mainData">
      <div class="leftSide">
        <div class="imgContainer">
          <img :src="require('@/assets/pic2/' + sex + '.png')" />
        </div>
      </div>
      <div class="rightSide">
        <p id="name" style="color: white">{{ name }}</p>
        <div id="type">
          {{ type }}
        </div>
        <div id="mainBottom">
          <div>
            <span style="font-weight: bold; color: white">性别:</span>
            <span style="font-weight: bold; color: white">{{ sex }}</span>
          </div>
          <div>
            <span style="font-weight: bold; color: white">年龄:</span>
            <span style="font-weight: bold; color: white">{{ age }}岁</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 数据列表 -->
    <div class="list">
      <div v-for="(data, index) in dataList" :key="index">
        <span>{{ data.name }}:</span>
        <span>{{ data.data }}</span>
      </div>
    </div>
    <div class="pictureContainer">
      <p class="title">相关照片</p>
      <img :src="require('@/assets/pic2/' + imgPath + '.png')" alt="" />
      <p class="bz">图片备注：{{ remark }}</p>
    </div>
    <!-- 楼栋跳转按钮 -->
    <button class="toBuilding" @click="toBuilding">
      <img src="@/assets/设施场所icon/定位.png" title="跳转至楼栋" />
    </button>
    <!-- 手动刷新按钮 -->
    <button class="renew" @click="renew">
      <img src="@/assets/pic2/刷新.png" title="读取最新数据" />
    </button>
    <!-- 返回人口搜索界面按钮 -->
    <button class="return" @click="returnBack">
      <img src="@/assets/pic2/转到.png" title="返回" />
    </button>
  </div>
</template>

<script>
/*eslint-disable */
import axios from "axios";
import pubsub from "pubsub-js";
import { ElMessage } from "element-plus";
import { getCurrentInstance, onMounted } from "vue-demi";
import url from "@/components/URL.json";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import buildingData from "@/json/裕兴花园房屋面.json";

export default {
  name: "peopleSelected",
  data() {
    return {
      imgPath: "暂无图片",
      remark: "",
      sex: "女",
      name: "示例名字",
      age: "",
      type: "",
      dataList: [],
      tableData: [],
    };
  },
  setup() {
    const { proxy } = getCurrentInstance();
    const router = useRouter();
    const store = useStore();
    let subList = [];
    let backup = {};

    onMounted(() => {
      // 读取人口数据
      subList[0] = pubsub.subscribe("peopleSelected", (n, data) => {
        backup = data;
        store.commit("StorageP", backup);
        // 填入数据
        dataInput(data);
        // 查询同栋人员
        getNeighbour(data);
        // 读取人口相关照片
        getPicture(data);
      });
      setTimeout(() => {
        Array.from(document.querySelectorAll("th>.cell")).forEach((e) => {
          e.style["color"] = "#1296db";
        });
        Array.from(document.querySelectorAll("tr")).forEach((e) => {
          e.style["color"] = "white";
        });
      }, 300);
    });

    // 数据填入
    function dataInput(people) {
      //   console.log(people);
      let keyList = [
        "SJHM",
        "ZJHM",
        "JD",
        "JZD",
        "RYLX",
        "HJXZ",
        "SJYMC",
        "房号",
        "UPDATE_TIM",
      ];
      let nameList = [
        "手机号码",
        "证件号码",
        "街道",
        "居住地",
        "人员类型",
        "户籍地址",
        "数据来源",
        "房号",
        "更新时间",
      ];
      for (let i = 0; i < nameList.length; i++) {
        proxy.dataList[i] = {
          name: nameList[i],
          data: people[keyList[i]],
        };
      }
      //   console.log(proxy.dataList);
      proxy.name = people["XM"];
      proxy.age = people["AGE"];
      proxy.type = people["RYLX"];
      proxy.sex = people["SEX"];
    }

    //读取人口相关照片
    function getPicture(data) {
      axios({
        method: "get",
        url: url.basicURL + "getPicture",
        params: { num: data.ZJHM },
      }).then((res) => {
        // 没有相关照片
        if (res.data.length < 1) {
          proxy.imgPath = "暂无图片";
        }
        // 有相关照片
        else {
          // 读取照片
          let base64 = res.data[0].PIC_NAME;
          document
            .querySelector(".pictureContainer>img")
            .setAttribute(
              "src",
              "http://192.168.81.247:8086/Images/01-population/" + base64
            );
          // 读取备注
          proxy.remark = res.data[0].BZ;
        }
      });
    }

    // 手动更新数据
    function renew() {
      axios({
        method: "get",
        url: url.basicURL + "getPeopleData",
        params: { name: proxy.name },
        // params: { name: "陈锦" },
      }).then((res) => {
        // 数据填入
        dataInput(res.data[0]);
        // 查询同栋人员
        getNeighbour(res.data[0]);
        // 消息提示
        let date = new Date();
        let now =
          date.getMonth() +
          1 +
          "月" +
          date.getDate() +
          "日" +
          date.getHours() +
          "时" +
          date.getMinutes() +
          "分";
        ElMessage({
          message: "数据更新成功(" + now + ")",
          type: "success",
          offset: 100,
          duration: 4000,
        });
      });
    }

    // 查询同栋人员
    function getNeighbour(peopleSelected) {
      // 获取当前楼栋经纬度
      let location_x = peopleSelected["location_x"];
      let location_y = peopleSelected["location_y"];
      //   发送至后端查询
      axios({
        method: "get",
        url: url.basicURL + "getNeighbour",
        params: {
          x: location_x,
          y: location_y,
        },
      }).then((res) => {
        proxy.tableData = [];
        // 房号字段补缺
        res.data.forEach((element) => {
          if (Array.from(element.房号).length < 2) {
            element.房号 = "--号房";
          }
        });
        proxy.tableData = res.data;
      });
    }

    // 排序事件处理函数
    function returnBack() {
      pubsub.publish("FirstPageShow", "@");
      window.history.go(-1);
      // 打开右侧小字标识
      pubsub.publish("backFromPeople");
    }

    //跳转至楼栋
    function toBuilding() {
      // 读取楼栋坐标信息
      let x = backup["location_x"];
      let y = backup["location_y"];
      let nearestBuilding = {};
      let minDistance = 999;
      // 距离匹配
      buildingData.features.forEach((element) => {
        let distance = Math.sqrt(
          Math.pow(element.attributes.X - x, 2) +
            Math.pow(element.attributes.Y - y, 2)
        );
        if (distance < minDistance) {
          minDistance = distance;
          nearestBuilding = element;
        }
      });
      console.log(nearestBuilding);
      // 退出至主页
      pubsub.publish("hierarchyQuit", "@");
      pubsub.publish("needCut", false);
      returnBack();
      window.history.go(-1);
      pubsub.publish("searchHide");
      // 跳转
      setTimeout(() => {
        store.commit("isFromPeople", true);
        console.log("跳转");
        router.push({
          path: "/buildingSelected",
        });
        //   跳转
        pubsub.publish("buildingSelected", nearestBuilding);
      }, 500);
    }

    return { renew, returnBack, subList, toBuilding };
  },
  beforeDestroy() {
    this.subList.forEach((element) => {
      pubsub.unsubscribe(element);
    });
  },
  beforeRouteLeave() {
    this.subList.forEach((element) => {
      pubsub.unsubscribe(element);
    });
    pubsub.publish("hierarchyQuit");
  },
};
</script>

<style lang="less" scoped>
.el-table {
  top: 1% !important;
  position: relative !important;
  left: 1.5% !important;
  max-height: 42.8% !important;
  border-radius: 7px;
  border: #1296db 1px solid;
}

.toBuilding {
  background-color: #1296db;
  padding: 1%;
  border: none;
  border-radius: 5px;
  width: 8%;
  position: absolute;
  top: 25.5%;
  right: 5%;
}

.pictureContainer {
  // background-color: antiquewhite;
  width: 100%;
  height: 30%;
  position: relative;
  > .title {
    background-image: ~"url(@{app-images-root}/button_bg2.png)";
    background-size: 100% 100%;
    height: 17%;
    padding-top: 3.5%;
    font-size: 170%;
    font-weight: bold;
    text-align: center;
    position: relative;
    color: white;
  }
  > img {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 90%;
    position: relative;
    left: 5%;
    top: 5%;
    border: #1296db 1px solid;
    border-radius: 5px;
  }
  > .bz {
    position: relative;
    top: 7%;
    text-align: center;
    font-size: 120%;
    color: white;
  }
}

.renew {
  position: absolute;
  top: 0%;
  right: 0%;
  outline: none;
  border: none;
  background-color: transparent;
  display: inline;
  > img {
    width: 30px;
  }
}
.renew > img:hover {
  transform: rotate(360deg);
  transition-duration: 1s;
}

.return {
  position: absolute;
  top: -0.4%;
  right: 7%;
  outline: none;
  border: none;
  background-color: transparent;
  display: inline;
  > img {
    width: 38px;
    transform: scaleX(-1);
  }
}

.peopleContainer {
  height: 100%;
  > .mainData {
    height: 13%;
    // border: red 1px solid;
  }
  > p {
    background-image: ~"url(@{app-images-root}/button_bg2.png)";
    background-size: 100% 100%;
    height: 5%;
    font-size: 170%;
    font-weight: bold;
    padding-top: 3%;
    text-align: center;
    position: relative;
    left: -18%;
    color: #1296db;
    margin-top: 0%;
  }
  > span {
    color: #1296db;
    float: right;
    position: absolute;
    right: 2%;
    top: 55%;
    font-weight: bold;
  }
}

.leftSide {
  height: 100%;
  width: 30%;
  position: relative;
  display: inline-block;
  > .imgContainer {
    box-shadow: 0px 0px 10px 0.05px #1296db;
    border-radius: 50%;
    width: 100px;
    height: 100px;
    position: relative;
    top: 15%;
    left: 12%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    > img {
      width: 90%;
    }
  }
}

.rightSide {
  display: inline-block;
  //   background-color: antiquewhite;
  height: 100%;
  width: 70%;
  position: relative;
  top: -46%;
  right: 0%;
  > #name {
    color: #1296db;
    font-size: 160%;
    font-weight: bold;
    position: relative;
    top: 42%;
  }
  > #type {
    // border: #1296db 1px solid;
    background-color: #1296db;
    position: relative;
    display: inline;
    top: 50%;
    padding: 0 5%;
    color: white;
    border-radius: 3px;
  }
  > #mainBottom {
    // background-color: #1296db;
    position: relative;
    top: 60%;
    left: -7%;
    > div {
      display: inline-block;
      margin: 0 7%;
    }
  }
}

.list {
  height: 40%;
  margin-top: -3%;
  > div {
    padding: 3%;
    padding-left: 4%;
    color: white;
    font-size: 110%;
    > span:first-child {
      color: #1296db;
      font-size: 120%;
      font-weight: bold;
    }
  }
}
</style>